<template>
  <div class="container">
    <el-card class="card" v-loading="loading">
      <!-- 头部分支小模块 -->
      <el-row type="flex" justify="end">
        <el-col :span="24">
          <span style="color: pink; font-size: 12px"
            >说明：目前支持学科和关键字条件筛选</span
          >
        </el-col>
        <el-col :span="2">
          <div class="grid-content bg-purple-light">
            <el-button
              size="small"
              type="success"
              style="margin-bottom: 10px"
              @click="$router.push('/questions/new')"
            >
              <i class="el-icon-edit">新增试题</i>
            </el-button>
          </div>
        </el-col>
      </el-row>
      <!-- 头部分支小模块 -->

      <!-- 下拉框 输入框 -->
      <el-form label-width="75px" :model="formData">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.subjectID"
                @change="subjectChange"
              >
                <el-option
                  v-for="(item, index) in subjectList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.catalogID"
              >
                <el-option
                  v-for="item in directorysList"
                  :key="item.id"
                  :label="item.directoryName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select size="small" class="el_select" v-model="formData.tags">
                <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                class="el_select"
                size="small"
                v-model="formData.keyword"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.questionType"
              >
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="6">
            <el-form-item label="难度" v-model="formData.difficulty">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.difficulty"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.direction"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                size="small"
                class="el_select"
                v-model="formData.creatorID"
              >
                <el-option
                  v-for="(item, index) in creatorPeople"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                class="el_select"
                size="small"
                v-model="formData.remarks"
                placeholder="请描述题目备注"
              ></el-input>
            </el-form-item>
          </el-col>
          <!--  -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input
                class="el_select"
                size="small"
                v-model="formData.shortName"
                placeholder="请输入企业简称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select
                size="small"
                v-model="formData.province"
                style="width: 155px; margin-left:10px"
                @change="provinceChange"
              >
                <el-option
                  v-for="(item, index) in provinces"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                size="small"
                v-model="formData.city"
                style="width: 155px; margin-left: 10px"
              >
                <el-option
                  v-for="item in citysList"
                  :key="item.id"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="text-align: right; padding-right: 30px">
            <el-button type="primary" plain size="small" @click="emptySelect"
              >清除</el-button
            >
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 下拉框 输入框 -->

      <el-alert type="info" show-icon :closable="false">
        <template #title> 数据一共{{ total }}条 </template>
      </el-alert>

      <!-- 表格 -->
      <el-table style="width: 100%" :data="list">
        <el-table-column  width="180" prop="number" label="试题编号">
        </el-table-column>
        <el-table-column prop="subject" label="学科">
        </el-table-column>
        <el-table-column prop="catalog" label="目录">
        </el-table-column>
        <el-table-column prop="questionType" :formatter="formatQuestion" label="题型">
        </el-table-column>
        <el-table-column label="题干">
          <template #default="{ row }">
            <div v-html="row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间">
          <template #default="{ row }">
            {{ row.addDate | formatTimeDayjs("YYYY年MM月DD日 hh:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="formatDifficulty"
        >
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="录入人"
          :formatter="formatCreator"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- 预览题目 -->
            <el-button
              title="预览题目"
              type="primary"
              circle
              plain
              size="small"
              @click="openDialog(row.id)"
            >
              <i class="el-icon-view"></i
            ></el-button>
            <!-- 修改试题 -->
            <el-button
            title="修改题目"
              type="success"
              circle
              plain
              size="small"
              @click="$router.push(`/questions/new?id=${row.id}`)"
              ><i class="el-icon-edit"></i
            ></el-button>
            <!-- 删除题目 -->
            <el-button
            title="删除题目"
              type="danger"
              circle
              plain
              size="small"
              @click="delItem(row.id)"
              ><i class="el-icon-delete"></i
            ></el-button>
            <!-- 加入精选题库 -->
            <el-button
            title="加入精选"
              type="warning"
              circle
              plain
              size="small"
              @click="AddChoice(row.id)"
              ><i class="el-icon-check"></i
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->

      <!-- 分页 -->
      <el-pagination
        :current-page="page"
        :page-sizes="[1, 2, 3, 4, 5, 6]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align: right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- 分页 -->

      <!-- 预览题目对话框 -->
      <QuestionsDialog :isShowDialog.sync="isShowDialog" :id="id" />
      <!-- 预览题目对话框 -->
    </el-card>
  </div>
</template>

<script>
// 对话框组件
import QuestionsDialog from '../components/questions-preview.vue'
// 基础题库请求
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
// 学科简单列表请求
import { simple } from '@/api/hmmm/subjects.js'
// 目录简单列表请求
import { list as directorysList } from '@/api/hmmm/directorys.js'
// 标签简单列表请求 aaa
import { reqGetlist as tagsList } from '@/api/hmmm/tags.js'
// 常量文件夹
import {
  questionType,
  difficulty,
  direction,
  creatorPeople
} from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  name: 'Questions',
  components: {
    QuestionsDialog
  },
  computed: {
    // 试题类型
    questionType () {
      return questionType
    },
    // 难度
    difficulty () {
      return difficulty
    },
    // 方向
    direction () {
      return direction
    },
    // 录入人
    creatorPeople () {
      return creatorPeople
    }
    // 城市
  },
  data () {
    return {
      id: null,
      provinces: provinces(),
      list: [], // 基础题库列表
      // detailList: [], // 详细题库列表
      total: 0, // 总数
      page: 1,
      pagesize: 3,
      subjectList: [], // 学科列表
      directorysList: [], // 目录列表
      tagsList: [], // 标签列表
      citysList: [], // 城市列表
      isShowDialog: false, // 预览题目对话框显隐
      loading: false, // 表格loading

      formData: {
        subjectID: null, // 学科
        difficulty: null, // 难度
        questionType: null, // 试题类型
        tags: null, // 标签名称
        province: null, // 企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, // 题目备注
        shortName: null, // 企业简称
        direction: null, // 方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        number: null
      }
    }
  },

  created () {
    // 获取基础题库列表
    this.getQuestionsList()
    // 获取学科列表
    this.getSubjectsList()
  },

  methods: {
    // 二级目录/目录标签
    async subjectChange () {
      // console.log(this.formData.subjectID)
      // 目录
      const { data: { items } } = await directorysList({ subjectID: this.formData.subjectID })
      console.log(items)
      this.directorysList = items
      // 标签
      this.getTagsList()
    },

    // 获取基础列表
    async getQuestionsList () {
      this.loading = true
      const {
        data: { items, counts }
      } = await list({ page: this.page, pagesize: this.pagesize })
      this.list = items
      this.total = counts
      console.log(items, 45)
      this.loading = false
    },

    // 学科列表
    async getSubjectsList () {
      const { data } = await simple()
      console.log(data, 9898)
      this.subjectList = data
    },

    // 标签列表
    async getTagsList () {
      //
      const {
        data: { items }
      } = await tagsList({ subjectID: this.formData.subjectID })
      this.tagsList = items
      console.log(items, 46)
    },

    // 城市列表
    provinceChange () {
      this.formData.city = ''
      // console.log(this.formData.province)
      const res = citys(this.formData.province)
      // console.log(res)
      this.citysList = res
    },

    // 清除按钮
    emptySelect () {
      this.formData = {
        page: 1,
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        creatorID: '',
        catalogID: '',
        id: ''
      }
      // 重新获取数据
      this.getQuestionsList()
      this.$message.success('清除成功<(￣ c￣)y▂ξ')
    },

    // 每页条数展示
    handleSizeChange (val) {
      console.log(val)
      this.pagesize = val
      this.getQuestionsList()
    },

    // 点击切换页数
    handleCurrentChange (val) {
      console.log(val)
      this.page = val
      // 重新获取数据
      this.getQuestionsList()
    },

    // 处理难度格式
    formatDifficulty (row, column, cellValue, index) {
      // console.log(cellValue, 234)
      const res = difficulty.find((item) => +item.value === +cellValue)
      return res ? res.label : '未知难度'
    },

    // 处理录入人格式
    formatCreator (row, column, cellValue, index) {
      // console.log(cellValue, 87)
      const res = creatorPeople.find((item) => item.value === +cellValue)
      return res ? res.label : '未知录入人'
    },

    // 处理试题类型格式
    formatQuestion (row, column, cellValue, index) {
      // console.log(cellValue, 9090)
      const res = questionType.find(item => item.value === +cellValue)
      return res ? res.label : '未知题目类型'
    },

    // 打开预览题库对话框
    async openDialog (id) {
      console.log(id)
      this.isShowDialog = true
      this.id = id
      // console.log(id, 80)
      // const { data } = await detail({ id })
      // console.log(data, 19)
      // this.detailList = data
    },

    // 删除题目
    delItem (id) {
      this.$confirm('要不要删除啊亲<(￣ c￣)y▂ξ', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const res = await remove({ id })
          console.log(res)
          // 提示
          this.$message.success('删除题目成功<(￣ c￣)y▂ξ')
          // 删除掉最后一条数据跳到上一页
          if (this.list.length === 1 && this.page > 1) {
            // 回到上一页
            this.page--
          }
          // 重新渲染页面
          this.getQuestionsList()
        })
        .catch(() => {})
    },

    // 搜索
    async search () {
      this.page = 1
      const {
        data: { items, counts }
      } = await list({
        ...this.formData,
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(items, 777)
      this.list = items
      this.total = counts
    },

    // 添加到精选题库
    AddChoice (id) {
      this.$confirm('要不要加入精选题库啊亲<(￣ c￣)y▂ξ', '温馨小提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(async () => {
          const res = await choiceAdd({ id, choiceState: 1 })
          console.log(res)
          if (this.list.length === 1 && this.page > 1) {
            // 回到上一页
            this.page--
          }
          this.$message.success('加入精选题库成功<(￣ c￣)y▂ξ')
          // 重新获取数据
          this.getQuestionsList()
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang='scss'>
.card {
  margin-top: 10px;
  .el_select {
    margin-left: 10px;
    width: 320px;
    height: 32px;
  }
}
</style>
